<template>
  <el-card shadow="hover">
    <div slot="header" class="clearfix">
      <span>{{ title }}</span>
      <el-button style="float: right" size="small" @click="$emit('cancel')"
        >返回</el-button
      >
    </div>
    <div>
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-position="right"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-tabs
              type="border-card"
              v-model="activeName"
              @tab-click="handleClick"
            >
              <el-tab-pane label="基本信息" name="first">
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item
                      label="套餐编码"
                      placeholder="请输入套餐编码"
                      prop="code"
                    >
                      <el-input v-model="form.code" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="套餐名称"
                      placeholder="请输入套餐名称"
                      prop="name"
                    >
                      <el-input v-model="form.name" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="适用性别" prop="sex">
                      <el-select
                        v-model="form.sex"
                        placeholder="请选择性别"
                        style="width: 100%"
                      >
                        <el-option :value="0" label="不限" />
                        <el-option :value="1" label="男" />
                        <el-option :value="2" label="女" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item
                      label="助记码"
                      placeholder="请输入套餐助记码"
                      prop="helpCode"
                    >
                      <el-input v-model="form.helpCode" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="适用年龄" prop="age">
                      <el-input v-model="form.age" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="套餐图片" prop="img">
                      <el-upload
                        class="img-uploader"
                        v-model="form.img"
                        :action="action"
                        :headers="headers"
                        :show-file-list="false"
                        :on-success="handleSuccess"
                        :before-upload="beforeUpload"
                      >
                        <img v-if="imageUrl" :src="imageUrl" class="img" />
                        <i v-else class="el-icon-plus img-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="套餐说明">
                      <el-input
                        v-model="form.remark"
                        type="textarea"
                        placeholder="请输入套餐说明"
                        show-word-limit
                        maxlength="100"
                        :autosize="{ minRows: 2, maxRows: 5 }"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="注意事项" prop="value">
                      <el-input
                        v-model="form.attention"
                        type="textarea"
                        placeholder="请输入套餐注意事项"
                        show-word-limit
                        maxlength="200"
                        :autosize="{ minRows: 2, maxRows: 5 }"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="检查组信息" name="second">
                <el-form-item label="检查组" prop="roles">
                  <el-select
                    v-model="checkGroupIds"
                    placeholder="请选择检查组"
                    clearable
                    style="width: 80%"
                    multiple
                  >
                    <el-option
                      v-for="(item, index) in checkGroupList"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-table
                  :data="groupTableList"
                  stripe
                  border
                  highlight-current-row
                  max-height="450"
                >
                  <el-table-column prop="code" label="检查组编码" width="180">
                  </el-table-column>
                  <el-table-column prop="name" label="检查组名称">
                  </el-table-column>
                  <el-table-column prop="age" label="助记码"> </el-table-column>
                  <el-table-column
                    prop="sex"
                    label="适用性别"
                    :formatter="formatSex"
                  >
                  </el-table-column>
                  <el-table-column prop="remark" label="检查项目说明">
                  </el-table-column>
                  <el-table-column prop="attention" label="检查项目注意事项">
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('cancel')">取 消</el-button>
        <el-button type="primary" @click="clickOk">确 定</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  /** 接受父组件传递的值 */
  props: ["title", "form", "groupTableList"],
  /** 属性监听 回显*/
  watch: {
    form: {
      handler(val, old) {
        this.checkGroupIds = [];
        console.log("表单值", val);
        this.imageUrl = val.img.startsWith("https")
          ? val.img
          : this.$qiniu + val.img;
      },
    },
  },
  data() {
    return {
      // 表单校验规则
      rules: {
        userName: [
          { required: true, message: "请输入登录名", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "登录名称的长在2 ~ 30 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 100,
            message: "登录密码的长在6 ~ 30 个字符",
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
            // 自定义校验规则 使用匿名函数
            validator: (rule, value, callback) => {
              if (this.form.sex === undefined || this.form.sex === null) {
                callback(new Error("请选择性别"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        img: [
          {
            required: true,
            // 自定义校验规则 使用匿名函数
            validator: (rule, value, callback) => {
              if (!this.form.img) {
                callback(new Error("请上传套餐图片"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        openId: [
          { required: true, message: "请输入登录名", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "角色名称的长在2 ~ 30 个字符",
            trigger: "blur",
          },
        ],
      },
      imageUrl: null,
      action: "/tool/upload",
      headers: {
        Authorization: sessionStorage.getItem("token"),
      },
      checkGroupList: [],
      checkGroupIds: [],
      activeName: "first",
    };
  },
  created() {
    this.$ajax.get("/checkGroup/findAll").then((res) => {
      this.checkGroupList = res.data.data;
    });
    console.log("this.form.checkGroupList", this.form.checkGroupList);
    // 回显检查组信息
    if (this.form.checkGroupList && this.form.checkGroupList.length > 0) {
      this.form.checkGroupList.forEach((item) => {
        this.checkGroupIds.push(item.id);
        console.log("---", this.checkGroupIds);
      });
    }
  },
  methods: {
    /**
     * 上传成功
     * res: 返回的参数
     * file: 上传文件信息
     * */
    handleSuccess(res, file) {
      this.imageUrl = this.$qiniu + res.data;
      this.form.img = res.data;
    },
    /**
     * 上传之前
     * file: 可以判断文件类型、文件大小
     * */
    beforeUpload(file) {
      /* 判断文件大小 不能超过10m */
      if (file.size > 10 * 1024 * 1024) {
        this.$message.warning("上传图片大小不能超过10M!");
        return false;
      }
      /* 判断文件类型 */
      // 定义索引 到最后一个点的位置
      let index = file.name.lastIndexOf(".");
      // 截取后缀
      let hz = file.name.substring(index + 1);
      if (hz !== "jpg" && hz !== "png" && hz !== "PNG" && hz !== "jpeg") {
        this.$message.warning("请上传-jpg-png-jpeg-格式的图片!");
        return false;
      }
    },
    /** 点击确定 */
    clickOk() {
      // 进行表单校验
      this.$refs.form.validate((valid) => {
        // 校验不通过
        if (!valid) return this.$message.error("表单校验失败,请检查后提交！");
        let arr = [];
        this.checkGroupIds.forEach((item) => {
          arr.push({ id: item });
        });
        this.form.checkGroups = arr;
        // 校验通过
        console.log(this.form);
        if (!this.form.id) {
          this.$ajax.post("/setmeal/insert/", this.form).then((res) => {
            this.$message.success(res.data.message);
            return this.$emit("cancel");
          });
        } else {
          this.$ajax.put("/setmeal/update/", this.form).then((res) => {
            this.$message.success(res.data.message);
            return this.$emit("cancel");
          });
        }
      });
    },
    /** 格式化性别 */
    formatSex(row) {
      if (row.sex === "1") {
        return "男";
      } else if (row.sex === "2") {
        return "女";
      } else {
        return "不限";
      }
    },
    /** 格式化类型 */
    formatType(row) {
      if (row.type === "1") {
        return "检验";
      } else if (row.type === "2") {
        return "检查";
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped>
.status-class {
  margin-left: -55%;
}
.status-class1 {
  margin-left: 0px;
}
.img-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.img-uploader .el-upload:hover {
  border-color: #409eff;
}
.img-uploader-icon {
  font-size: 20px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
}
.img {
  width: 130px;
  height: 130px;
  display: block;
}
.clearfix {
  text-align: left;
  margin-left: 20px;
}
.dialog-footer {
  margin-top: 20px;
}
</style>
